import React, { useState, useEffect } from 'react';
import _ from 'lodash';
import { createForm } from 'rc-form'
import {
    NavBar,
    Icon,
    List,
    InputItem,
    TextareaItem,
    Button,
    Toast,
    Accordion
} from 'antd-mobile';

import buildSteps from "./common.js";
import { ParentOrderDetails, evaluateOrder } from "@/api/order/order.js"
import { R, VOID, ORDER_STATUSES } from "@/assets/js/dict.js"
import './orderDetails.scss';

import star_selected from "@/assets/svg/star_selected.svg"
import star_unselected from "@/assets/svg/star_unselected.svg"

const Item = List.Item;
const Brief = Item.Brief;

const myImg = (src, key, fun) => <img src={src} onClick={() => fun(key)} key={key} className="am-icon am-icon-md"
    style={{ marginLeft: "5%" }} alt="" />;

/*
* 历史订单的详情页，已经完成的订单及进入退款流程的订单
* */
function OrderDetailsOfHistory (props) {
    console.log("OrderDetailsOfHistory--->", props);

    let [OrderDetailsData, setOrderDetailsData] = useState({ students: [], parent: {}, teacher: {}, applies: [], learn_hours: "[]" }); // 相当于 this.state
    let [order_id] = useState(() => {
        if (!!props.location.state) {
            return props.location.state.order_id;
        } else {
            return sessionStorage.getItem("order_id");
        }
    });

    //分数
    let [score, setScore] = useState(0);

    /**
     * 选中星星，更改分数
     * @param index
     */
    function select (index) {
        if (!OrderDetailsData.finish_core && OrderDetailsData.status === ORDER_STATUSES.FINISHED) {
            setScore(index);
        }
    }

    //分数展示
    function scoreShow () {
        let max = 5;
        let re = [];
        for (let i = 1; i <= score; i++) {
            re.push(myImg(star_selected, i, select));
        }
        for (let i = score + 1; i <= max; i++) {
            re.push(myImg(star_unselected, i, select))
        }
        return re;
    }

    function getOrderDetails () {
        ParentOrderDetails({ order_id: order_id }, res => {

            //非异常的请求结果，交由回调处理
            if (res[R.code] === R.success) {
                let order = res[R.data];
                console.log('order ------>>>', order)
                setOrderDetailsData(order);
                setScore(order.finish_score || 0);
            } else {
                Toast.fail(res[R.msg]);
            }
        });
    }


    /**
     * 保存评价
     */
    function saveScore () {
        let params = props.form.getFieldsValue().OrderDetailsData;
        if (score === 0) {
            Toast.info("您还未进行评分", 2, VOID, false);
            return;
        }

        if (!params["finish_comment"]) {
            Toast.info("您还未写评语", 2, VOID, false);
            return;
        }
        params["finish_score"] = score;
        params["order_id"] = OrderDetailsData.id;
        evaluateOrder(params, (res) => {
            if (R.isSuccess(res)) {
                getOrderDetails();
            } else {
                Toast.fail("操作失败：" + res[R.msg], 3, VOID, false);
            }
        })
    }


    useEffect(getOrderDetails, []);

    const { getFieldProps } = props.form;
    return (
        <div className="orderDetails">
            <div className="page-title  home-tit">
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                    leftContent={<span key="rc"></span>}
                    onLeftClick={() => {
                        props.history.goBack()
                    }}
                >
                    历史订单
                </NavBar>
            </div>
            <div className="page-content  home-content">
                <div className="publish-content-piece">
                    <div className="form-box">
                        {/* <div className="form-con">
                            {buildSteps(OrderDetailsData.status)}
                        </div> */}

                        <div className="status-style">
                            订单状态:
                            <b>{OrderDetailsData.status}</b>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                基本要求
                            </strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <InputItem
                                    type="text"
                                    editable="false"
                                    value={OrderDetailsData.parent_name}
                                >家长姓名</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.parent_gender}

                                >家长性別</InputItem>
                                <InputItem
                                    editable="false"
                                    value={OrderDetailsData.subjects}
                                >
                                    辅导科目
                                </InputItem>
                                <TextareaItem
                                    title="上课地址"
                                    value={OrderDetailsData.learn_address}
                                    autoHeight
                                    editable="false"
                                />
                            </List>

                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>
                                可授课时间段
                            </strong>
                        </div>
                        <div className="form-con">
                            <Accordion defaultActiveKey="0" className="my-accordion">
                                {
                                    JSON.parse(OrderDetailsData.learn_hours).length ?
                                        JSON.parse(OrderDetailsData.learn_hours).map((item, index) => {
                                            return <Accordion.Panel header={
                                                <div>
                                                    {item.week}
                                                </div>
                                            } key={index}>
                                                <List className="my-list">
                                                    <Item extra={item.startTime}>开始日期</Item>
                                                    <Item extra={item.endTime}>结束日期</Item>
                                                </List>
                                            </Accordion.Panel>
                                        })
                                        :
                                        ''
                                }
                            </Accordion>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>对家教老师的要求</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                <TextareaItem
                                    disabled
                                    editable="false"
                                    value={OrderDetailsData.demand}
                                    autoHeight
                                    placeholder={"教学的附加说明"}
                                />
                            </List>
                        </div>
                        <div className="form-tit">
                            <i className="mini-block" />
                            <strong>学生</strong>
                        </div>
                        <div className="form-con">
                            <List>
                                {OrderDetailsData.students.map((item, index) => {
                                    return (
                                        <Item key={index}
                                            arrow="empty"
                                            multipleLine
                                            onClick={() => {
                                                console.log("item-->", item);
                                            }}
                                            platform="cross"
                                        >
                                            名称：{item.name}
                                            <Brief> 年龄：{item.age}</Brief>
                                            <Brief> 年级：{item.grade}</Brief>
                                            <Brief> 说明：{item.note}</Brief>
                                        </Item>
                                    )
                                })}
                            </List>
                        </div>

                        <div className="form-tit"
                            style={{ display: (OrderDetailsData.applies.length > 0 ? 'none' : 'block') }}>
                            <i className="mini-block" />
                            <strong>
                                家教信息
                            </strong>
                        </div>
                        <div className="form-con"
                            style={{ display: (OrderDetailsData.applies.length > 0 ? 'none' : 'block') }}>
                            {!!OrderDetailsData.teacher ?
                                <List>
                                    <InputItem
                                        type="text"
                                        editable="false"
                                        value={OrderDetailsData.teacher.name}
                                    >姓名</InputItem>
                                    <InputItem
                                        editable="false"
                                        value={OrderDetailsData.teacher.gender}

                                    >性别</InputItem>

                                    <InputItem
                                        editable="false"
                                        value={OrderDetailsData.teacher.phone}

                                    >联系方式</InputItem>

                                    <InputItem
                                        editable="false"
                                        value={OrderDetailsData.teacher.school}

                                    >学校</InputItem>

                                </List> : ""}
                        </div>

                        <div className="form-tit" style={{display: OrderDetailsData.status === ORDER_STATUSES.FINISHED? 'block': 'none'}}>
                            <i className="mini-block" />
                            <strong>对家教老师的服务做出评价</strong>
                        </div>
                        <div className="form-con" style={{display: OrderDetailsData.status === ORDER_STATUSES.FINISHED? 'block': 'none'}}>
                            <List>
                                <Item arrow="empty"
                                    multipleLine
                                >
                                    <Brief> <strong style={{ color: 'black' }}>评分：</strong>{scoreShow()}</Brief>
                                </Item>

                                <TextareaItem
                                    editable={!OrderDetailsData.finish_core && OrderDetailsData.status === ORDER_STATUSES.FINISHED ? "true" : "false"}

                                    {...OrderDetailsData.finish_core && OrderDetailsData.status === ORDER_STATUSES.FINISHED ? 'disabled' : ''}

                                    {...getFieldProps('OrderDetailsData.finish_comment', { initialValue: OrderDetailsData.finish_comment })}
                                    rows="6"
                                    autoHeight
                                    clear
                                    count={200}
                                    placeholder={"请输入您对此次服务的评价"}
                                    title="说明"
                                />
                            </List>
                        </div>
                        <div className="form-footer">
                            <Button
                                type="primary" stype={{display: OrderDetailsData.finish_core > 0 && OrderDetailsData.status === ORDER_STATUSES.FINISHED ? 'block' : 'none'}}
                                onClick={saveScore}
                            >{!OrderDetailsData.finish_core && OrderDetailsData.status === ORDER_STATUSES.FINISHED ? '保存评价' : '已经评论'}</Button>
                        </div>
                    </div>
                </div>
            </div>
        </div>);
}

OrderDetailsOfHistory = createForm()(OrderDetailsOfHistory);
export default OrderDetailsOfHistory;